import React, { Component } from 'react'
import { connect } from 'react-redux'
import { WhiteSpace, List, WingBlank,SearchBar,Button ,Icon,NavBar,Drawer} from 'antd-mobile'
import TitleNavBar from '@/common/components/displays/TitleNavBar'
import {mapStateToProps, mapDispatchToProps} from '@/common/actions/Agencylist'

import '@/common/style/ui.less'
import '@/common/components/displays/TitleNavBar.less'
import '@/common/style/Agencylist.less'

const Item = List.Item;
const Brief = Item.Brief; 
let  overthis;
class Agencylist extends Component {
    constructor(props){
        super(props)
        this.state = {
            titleData : {
                title: "Back",
                content:"Agencylist",
                rightTitle: <i  style={{
                    width:'25px',
                    height:"25px",
                    display:"inline-block",
                    background:`url(${require('../../images/rightDrawer.png')})`,
                    backgroundSize:"100% 100%"
                }}></i>
            },
            open:false,
            agencylistparams:{}
        }
    }
    componentWillReceiveProps(props){
        this.setState({
            agencylistparams:this.props.Agencylist.listParams
        })
    }
    componentDidMount(){
        overthis=this;
        this.props.getTalent(this.props.Agencylist.listParams);
    }
    linkHandle(agencyId){
        this.props.history.push(`/AdminAgencyTelant/${agencyId}`);
    }
    formatTime(timestamp){
        var date = new Date(timestamp);
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes() + ':';
        var s = date.getSeconds();
        return Y+M+D;
    }
    leftClick = () => {
        this.props.history.goBack();
    }
    onOpenChange = (...args) => {
        this.setState({ open: !this.state.open });
    }
    SearchInputhandle(val){
        Object.assign(this.state.agencylistparams,{
            queryValue:val
        })
        this.props.getTalent(this.state.agencylistparams);
    }
    render() {
        function agencyitemhandle(ordertext, eltarget) {
            //Ordercontainer
            let checkboxdom = eltarget.parentNode.getElementsByTagName("input")[0];
            if (!checkboxdom.checked) {
                removecheckedstatus("Ordercontainer")
                eltarget.classList.add("btnactive");
                Object.assign(overthis.state.agencylistparams,{
                    sortBy:ordertext
                })
            } else {
                eltarget.classList.remove("btnactive");
                Object.assign(overthis.state.agencylistparams,{
                    sortBy:""
                })
            }
        }
        function removecheckedstatus(container) {
            let JoinRangecontainer = document.getElementsByClassName(container)[0].getElementsByClassName("am-list-line")[0]
                .getElementsByClassName("am-list-content")[0].getElementsByTagName("label");
            for (let i = 0; i < JoinRangecontainer.length; i++) {
                let btndom = JoinRangecontainer[i].getElementsByClassName("am-button")[0];
                btndom.classList.remove("btnactive");
                JoinRangecontainer[i].getElementsByTagName("input")[0].checked = false;
            }
        }
        function rightClickhandle(){
            let sidebardom = document.getElementsByClassName("am-drawer-sidebar")[0];
            sidebardom.style.transform = 'translateX(0%)';
            sidebardom.style.transition = '.5s';
            this.setState({ open: !this.state.open });
        }
        function Agencylistconfirmhandle() {
           this.props.getTalent(this.state.agencylistparams);
           this.setState({ open: !this.state.open });
        }
        const sidebar=(<div className="navbarcontainer">
       
        {/* <h3 style={{
            top: "30px",
            height: "40px",
            lineHeight: "40px",
            color: 'rgba(80, 80, 80, 1)',
            fontSize: '14px',
            position: "relative",
            backgroundColor: "#fff",
            textIndent: '1em'
        }}>Filter</h3> */}
        <List renderHeader={() => 'Order'} className="Agencylist" style={{
            position: "relative",
            top: "45px",
            backgroundColor: "#fff"
        }}>
            <Item className="Ordercontainer">
                <label>
                    <Button type="primary" size="small" onClick={(e) => agencyitemhandle("totalDiamonds", e.currentTarget)}>Diamond</Button>
                    <input type="checkbox" style={{
                        display: "none"
                    }} />
                </label>
                <label>
                    <Button type="primary" size="small" onClick={(e) => agencyitemhandle("broadcastTime", e.currentTarget)}>Performance</Button>
                    <input type="checkbox" style={{
                        display: "none"
                    }} />
                </label>
            </Item>
        </List>
        <Button type="primary" onClick={() => Agencylistconfirmhandle.call(this)} style={{
            margin:"65px 23%"
        }}>Confirm</Button>
    </div>);
        const dawerdom =<Drawer
        className="my-drawer"
        ref="Drawercontainer"
        style={{
            height: document.documentElement.clientHeight,
            width: this.state.open ? document.documentElement.clientWidth : '0px',
            zIndex: 999,
        }}
        enableDragHandle
        contentStyle={{ color: '#A6A6A6', textAlign: 'center' }}
        sidebar={sidebar}
        open={this.state.open}
        position="right"
        onOpenChange={this.onOpenChange}
    >
    </Drawer>;
    
        return (
            <div id="Agencylist">   
                {/* <TitleNavBar titleData={this.state.titleData} Drawerstatus={true} talentState={this.props.talentState}/> */}
                <NavBar
                    mode='light'
                    leftContent={[
                        <Icon key='1' type='left' />,
                        <span key='2' className='title'>back</span>
                    ]}
                    onLeftClick={this.leftClick}
                    rightContent={[
                        <div key='1' style={{ display: this.props.withDate ? '' : 'none' }}>
                            <Icon type='left' />
                            <span className='date' onClick={this.rightClick}>{this.state.date}</span>
                            <Icon type='right' />
                        </div>,
                         <div key='2' onClick={()=>rightClickhandle.call(this)}><i  style={{
                            width:'25px',
                            height:"25px",
                            display:"inline-block",
                            background:`url(${require('../../images/rightDrawer.png')})`,
                            backgroundSize:"100% 100%"
                        }}></i></div>
                    ]}
                ></NavBar>
                <SearchBar style={{
                    top:"43px"
                }} placeholder="Search" 
                onChange={this.SearchInputhandle.bind(this)}
                />
                <WhiteSpace/>
                <List className="Agency-list">
                {
                    this.props.Agencylist.talentListparams.map((item,index)=>
                        <Item
                            key={index}
                            extra={this.formatTime(item.broadcastTime)}
                            arrow="horizontal"
                            style={{
                                zIndex:888
                            }}
                            thumb={<div>{index+1}<img src={item.avatar?item.avatar:require("../../images/AgencyTalentCarousel.jpg")} style={{
                                display:"inline-block",
                                marginLeft:'12px',
                                width:"55px",
                                height:"55px",
                                borderRadius:"50%",
                            }}/></div>}
                            multipleLine
                            onClick={() => {this.linkHandle(item.agencyId)}}
                        >
                             <span style={{
                                 verticalAlign:"middle",
                                 display:"inline-block",
                                 width:"62%",
                                 textOverflow:"ellipsis",
                                 overflow:"hidden",
                                 whiteSpace:"nowrap",
                                 fontSize:" 14px"
                             }}>{item.name}&nbsp;</span><label style={{
                                 color:"rgba(172, 51, 193, .9)",
                                 fontSize:"12px"
                             }}>{item.country?item.country:'china'}</label>
                            <Brief>{this.formatTime(item.registerTime)}</Brief>
                        </Item>
                    )
                }
                </List>
                <WhiteSpace/>
                {dawerdom}
            </div>
        )
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Agencylist);
